<script src="../ExternalLibrary/vue.js"></script>

<!-- -------------------------------01.过滤器 start------------------------------------ -->
<fieldset>
    <legend>01.显示过滤后的结果</legend>
    <div id="computed">
        <li v-for="i in eventNumbers">{{i}}</li>
    </div>
    <script>
        let oCalc = new Vue({
            el:"#computed",
            data:{
                numbers:[1,5,3,9,6,2,8]
            },
            computed:{
                eventNumbers:function (){
                    return this.numbers.filter(function (number){
                        return number%2===0;
                    })
                }
            }
            // computed:{
            //     eventNumbers:()=>{
            //          //此处应该是this失效了,可以作为一个典型案例分析
            //         return this.numbers.filter((number)=>{
            //             return number%2===0;
            //         })
            //     }
            // }
        })
    </script>
</fieldset>
<!-- -------------------------------01.过滤器 end------------------------------------ -->


<!-- -------------------------------02.计算属性不生效 start------------------------------------ -->
<fieldset>
    <legend>02.计算属性不生效</legend>
    <div id="invalid">
        <li v-for=""></li>
    </div>
</fieldset>
<!-- -------------------------------02.计算属性不生效 end------------------------------------ -->